<template>
  <inline-Modal
    :visible="visible"
    title="查看"
    :showOk="false"
    @cancel="handelCancel()"
  >
    <div class="inspect-detail-container custom-collapse-container">
      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" :show-arrow="false">
          <!-- 自定义头部左边 -->
          <template slot="header">
            <div @click.stop class="customize-text" header="基本信息"></div>
          </template>
          <!-- 自定义头部右边边 -->
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("1") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('1') && 'active']">
                <a-icon type="caret-down" />
              </div>
            </div>
          </template>
          <div class="material-content">
            <a-form-model ref="ruleForm" :model="baseInfo">
              <!-- 检查名称 -->
              <a-form-model-item label="检查名称">
                <a-input v-model="baseInfo.checkName" disabled />
              </a-form-model-item>
              <a-form-model-item label="检查类型">
                <a-input v-model="baseInfo.checkTypeDesc" disabled />
              </a-form-model-item>
              <a-form-model-item label="被检查单位">
                <a-input v-model="baseInfo.orgName" disabled />
              </a-form-model-item>
              <a-row>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <a-form-model-item label="检查时间">
                    <a-input
                      :value="
                        baseInfo.checkTimeStart ||
                          '' + '~' + baseInfo.checkTimeEnd ||
                          ''
                      "
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <a-form-model-item label="检查单位">
                    <a-input v-model="baseInfo.checkDepartmentName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <a-form-model-item label="检查人">
                    <a-input v-model="baseInfo.userName" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-form-model-item label="通知人">
                <a-input v-model="baseInfo.notifiers" disabled />
              </a-form-model-item>
              <a-form-model-item label="备注">
                <a-input v-model="baseInfo.remark" disabled />
              </a-form-model-item>
              <a-form-model-item label="上传附件">
                <bjUploadFile
                  :count="10"
                  v-model="fileList"
                  @download="downloadFile($event)"
                  @preview="viewFile($event)"
                  :viewMode="true"
                  :replaceFields="{
                    fileName: 'fileName',
                    fileSize: 'fileSize',
                    fileType: 'fileType',
                  }"
                ></bjUploadFile>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="2" :show-arrow="false">
          <!-- 自定义头部左边 -->
          <template slot="header">
            <div @click.stop class="customize-text" header="问题整改信息"></div>
          </template>
          <!-- 自定义头部右边边 -->
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("2") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('2') && 'active']">
                <a-icon type="caret-down" />
              </div>
            </div>
          </template>
          <div class="table-content">
            <vxe-table
              ref="xTable"
              height="240"
              align="center"
              show-overflow
              show-header-overflow
              border="inner"
              :data="tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="loading"
            >
              <vxe-column type="seq" width="80" title="序号"></vxe-column>
              <vxe-column field="orgName" title="标段"> </vxe-column>
              <vxe-column field="companyName" title="单位名称"> </vxe-column>
              <vxe-column field="issueNumber" title="问题数量"> </vxe-column>
              <vxe-column field="rectifyNum" title="已整改数量"> </vxe-column>
              <vxe-column field="notRectifyNum" title="未整改数量">
              </vxe-column>
              <vxe-column
                field="operate"
                width="300"
                title="操作"
                fixed="right"
                align="left"
              >
                <template #default="{ row }">
                  <div class="text-button-group">
                    <a-button type="link" @click="gotoDetail(row)">
                      查看
                    </a-button>
                    <a-button type="link" @click="downloadWord(row, 1)">
                      问题清单下载
                    </a-button>
                    <a-button type="link" @click="downloadWord(row, 2)">
                      整改回复单下载
                    </a-button>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div class="pager-container">
            <vxe-pager
              size="small"
              background
              :current-page.sync="pager.page"
              :page-size.sync="pager.pageSize"
              :total="pager.total"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
              :page-sizes="[20, 50, 100, 500]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  共<span>{{ pager.total }}</span
                  >条
                </div>
              </template>
            </vxe-pager>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 列表页 -->
    <inspectList
      :visible.sync="listVisible"
      :soucre="dataSoucre"
      @cancel="listCancel()"
    >
    </inspectList>

    <!-- 附件预览弹窗 -->
    <previewModal
      :visible.sync="previewVisible"
      :loading="previewLoading"
      ref="previewModal"
    ></previewModal>
  </inline-Modal>
</template>

<script>
import { mapGetters } from "vuex";
import { downloadDfs } from "@/utils/TopVUI";
import { getToken } from "@/utils/TopVUI";
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
import previewModal from "@/pages/document/minio/previewModal";
import inspectList from "./inspectList";
import {
  pageCheckUnit,
  downloadQD,
  downloadZG,
  detailHazard,
} from "@/api/safetyManage";
import { downLoadWordFileByArraybuffer } from "@/utils/util";
export default {
  components: {
    inspectList,
    bjUploadFile,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  data() {
    return {
      previewVisible: false,
      previewLoading: false,
      activeKey: ["1", "2"],
      baseInfo: {},
      fileList: [],
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      listVisible: false,
      dataSoucre: {},
    };
  },
  methods: {
    listCancel() {
      this.listVisible = false;
      this.getData();
    },
    //详情
    gotoDetail(row) {
      let { approveStatus } = this.baseInfo;
      let { type } = this.soucre;
      this.dataSoucre = {
        ...row,
        approveStatus,
        pageType: type,
      };
      this.listVisible = true;
    },
    downloadWord(row, type) {
      let { uuid, orgName, companyName } = row;
      if (type == 1) {
        downloadQD({ zhgdCheckUnitId: uuid }).then((data) => {
          downLoadWordFileByArraybuffer(
            data,
            orgName + "-" + companyName + "-" + "问题清单"
          );
        });
      } else {
        downloadZG({ zhgdCheckUnitId: uuid }).then((data) => {
          downLoadWordFileByArraybuffer(
            data,
            orgName + "-" + companyName + "-" + "整改回复单"
          );
        });
      }
    },

    //下载附件
    downloadFile(file) {
      let { url } = file;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    // 预览附件
    viewFile(file) {
      let { url } = file;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewVisible = true;
    },

    //查询页面所有数据
    getData() {
      Promise.all([this.getBaseInfo(), this.getTableData()])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },
    getBaseInfo() {
      return new Promise((resolve, reject) => {
        let { uuid } = this.soucre;
        detailHazard({ uuid })
          .then((res) => {
            this.baseInfo = res;
            this.fileList = [];
            let files = JSON.parse(this.baseInfo?.files ?? "[]");
            files.forEach((v) => {
              let lastIdx = v.name.lastIndexOf(".");
              let fileType = "." + v.name.substring(lastIdx + 1);
              this.fileList.push({
                fileName: v.name,
                fileType: fileType,
                fileSize: v.size ?? "",
                dfsFileUuid: v.uid,
                url: v.url,
              });
            });
            resolve();
          })
          .catch((_) => {
            this.fileList = [];
            this.baseInfo = {};
            reject();
          });
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      this.isPage = false;
      let { page, pageSize } = this.pager;
      let { tenantCode, uuid } = this.soucre;
      pageCheckUnit({
        page,
        pageSize,
        tenantCode,
        zhgdCheckId: uuid,
      })
        .then((res) => {
          this.tableData = res?.rows || [];
          this.pager.total = res?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.isPage = true;
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    handelCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
.inspect-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/.ant-form-item {
    margin-bottom: 10px;
    display: flex;
    .ant-form-item-label {
      width: 100px;
      flex-shrink: 0;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      textarea {
        height: 80px;
      }
      .ant-calendar-picker {
        width: 100%;
      }
    }
  }
  .material-content {
    padding: 0 50px 0 50px;
  }
}
</style>
